<template>
  <div class="r-list-container">
    <div class="list-item" v-for="(item, index) in props.dataSource" :key="item[props.fieldNames.key]">
      <div v-show="props.showIndex" class="item__index">{{ index + 1 }}</div>
      <div class="item__label">
        <template v-if="$slots.label">
          <slot name="label" v-bind="item"></slot>
        </template>
        <template v-else>
          {{ item[props.fieldNames.label] }}
        </template>
      </div>
      <div class="item__value">
        <template v-if="$slots.value">
          <slot name="value" v-bind="item"></slot>
        </template>
        <template v-else>
          {{ item[props.fieldNames.value] }}
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({
  inheritAttrs: false
});

const props = defineProps({
  dataSource: {
    type: Array,
    default: () => [],
    required: true
  },
  fieldNames: {
    type: Object,
    default: () => ({ key: 'key', label: 'label', value: 'value' })
  },
  showIndex: { type: Boolean, default: true }
});
</script>

<style lang="scss" scoped>
.r-list-container {
  width: 100%;
  height: auto;
  padding: 8px;

  .list-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;

    .item__index {
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 12px;
      font-size: 12px;
      color: var(--text-color);
      background-color: var(--hover-bg-color);
    }

    .item__label {
      flex-grow: 1;
      font-size: 14px;
      color: var(--base-text-color);
    }

    .item__value {
      font-size: 14px;
    }
  }
}
</style>
